<template>
  <el-form :inline="true" :model="dataForm" :size="size" ref="dataForm">
    <el-row :gutter="50" >

      <!--<div class="block-container">-->
        <!--<div class="block-content">-->
          <!--<div class="block-item-3"  >-->
            <el-form-item>
              <el-transfer
                filterable
                :filter-method="filterMethod"
                filter-placeholder="请输入城市拼音"
                v-model="value"
                :data="data"
                :titles="['来源', '目标']"
              >
              </el-transfer>
            </el-form-item>
          <!--</div>-->
          <!--<div class="block-item-3"  >-->
            <el-form-item>
              <label>菜单预览</label>
              <el-input
                placeholder="输入关键字进行过滤"
                v-model="filterText">
              </el-input>
              <el-tree
                class="filter-tree"
                :data="datatree"
                :props="defaultProps"
                default-expand-all
                :filter-node-method="filterNode"
                ref="tree">
              </el-tree>
            </el-form-item>
          <!--</div>-->
        <!--</div>-->
      <!--</div>-->

    </el-row>

    <div style="text-align: center;margin-top: 2%;">
      <el-button type="danger" plain style="width:90px" @click="cancel">确定</el-button>
    </div>
  </el-form>
</template>

<script>
  export default {
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    name: 'authProviderAccountManage',
    data() {
      const generateData = _ => {
        const data = [];
        const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
        const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
        cities.forEach((city, index) => {
          data.push({
            label: city,
            key: index,
            pinyin: pinyin[index]
          });
        });
        return data;
      };
      return {

        data: generateData(),
        value: [],
        filterMethod(query, item) {
          return item.pinyin.indexOf(query) > -1;
        },
        size: "small",
        // tabPosition:"top",
        dataForm:{
          "name":"商家1"
        }
        // ,
        // dataFormRules: {
          // name: [{ required: true, message: "请选择等级名称", trigger: "change" }],
          // description: [{ required: true, message: "请输入描述", trigger: "blur" }],
          // dpic: [{ required: true, message: "详情介绍图未上传", trigger: "blur" }],
          // logo: [{ required: true, message: "LOGO未上传", trigger: "blur" }],
          // hot_discount: [{ required: true, message: "请输入爆款折扣", trigger: "blur" },{ type: 'number', message: '爆款折扣必须为数字值'}],
          // other_discount: [{ required: true, message: "请输入其他折扣", trigger: "blur" },{ type: 'number', message: '其他折扣必须为数字值'}],
          // limits: [{ required: true, message: "请输入限制人数", trigger: "blur" },{ type: 'number', message: '限制人数必须为数字值'}],
          // members: [{ required: true, message: "请输入邀请注册人数", trigger: "blur" },{ type: 'number', message: '邀请注册人数必须为数字值'}],
          // one_charge: [{ required: true, message: "请输入一次性充值金额	", trigger: "blur" },{ type: 'number', message: '一次性充值金额爆款折扣必须为数字值'}],
          // order_flg: [{ required: true, message: "请选择是否下单", trigger: "blur" }],
          // remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
        // },
        , filterText: '',

        datatree: [{
          id: 1,
          label: '后台管理',
          children: [{
            id: 4,
            label: '财务中心',
            children: [{
              id: 4,
              label: '结算管理'
            }]
          },{
            id: 4,
            label: '订单中心'
          },{
            id: 4,
            label: '系统设置'
          },{
            id: 4,
            label: '采购中心'
          },{
            id: 4,
            label: '商品中心'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }

      }
    },
    methods: {
      filterNode(value, datatree) {
        if (!value) return true;
        return datatree.label.indexOf(value) !== -1;
      },
      cancel: function(){
        this.$emit('cancelClick', {})
      },
      datatree() {
        return {
          filterText: '',
          datatree: [{
            id: 1,
            label: '一级 1',
            children: [{
              id: 4,
              label: '二级 1-1',
              children: [{
                id: 9,
                label: '三级 1-1-1'
              }, {
                id: 10,
                label: '三级 1-1-2'
              }]
            }]
          }, {
            id: 2,
            label: '一级 2',
            children: [{
              id: 5,
              label: '二级 2-1'
            }, {
              id: 6,
              label: '二级 2-2'
            }]
          }, {
            id: 3,
            label: '一级 3',
            children: [{
              id: 7,
              label: '二级 3-1'
            }, {
              id: 8,
              label: '二级 3-2'
            }]
          }],
          defaultProps: {
            children: 'children',
            label: 'label'
          }
        };
      }
    },
    mounted() {
    }
  }
</script>

<style scoped>
  .block-container {
    /*width: 100%;*/
    background-color:#F0F3F4;
  }

  .block-title {
    text-align: center;
  }

  /* 父元素 */
  .block-content {
    font-size: 0;  /* 解决 inline-block 布局会出现多余间隙 */
    /*max-width: 1200px;*/
    margin: 0 auto;
  }

  .block-content .block-item-3{
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    transition: all .4s ease;
    vertical-align: top; /* 设置顶部对齐 */
    font-size: 14px;
  }

  /* 3 列 */
  .block-content .block-item-3 {
    /*width: 45%;  !*  width: 32%;  *!*/
    /*border: 1px solid #333;*/
    background: #ffffff;
    text-align: center;
    height: 350px;
    width: 48%;
    margin-top: 20px;
    margin-left: 2%;
    cursor: pointer;
  }

</style>
